<template>
	<comRoot>
		<template #page>
			<view class="roulette-page relative">
				<comDetailNavigateBack title="每日转盘" colorStyle="#FFFFFF"/>

				<view :style="{ height: 'calc(100vh - ' + commonNavHeight + ')', overflow: 'auto', paddingBottom: '60rpx' }">
					<image :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/roulette-bg.png`" class="bg" style="width: 100%;height: 2251rpx;"/>
					
					<!-- <view class="roulette-name relative margin-auto">
						<image :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/turntable-title.png`"
							class="bg" />
					</view> -->

					<view class="roulette-content margin-auto relative">
						<image class="award-light-box absolute" style="z-index: 101;" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/win-area.png`" mode=""></image>
						
						<image class="bg" style="z-index: 100;" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/bracket-bg.png`" mode=""></image>
						
						<view class="game-box absolute">
							<view class="game-box-content relative" :class="{ 'rotate-deg-num': rotateDeg }" :style="{transform: `rotate(${ rotateDeg }deg)`,}">
								<view class="award-content absolute">
									<view class="award-cell absolute" :style="{transform: `rotate(-${rotateDeg % 360}deg)`}" v-for="(item, index) in gameAwardData" :key="index">
										<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/reward-ball.png`" mode=""></image>
										<image class="award-cell-cover absolute" :src="item.item_cover" mode="aspectFit"></image>
										<view class="award-cell-title font-hanserif-bold absolute flex-all-center">
											<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/reward-ball-text.png`" mode=""></image>
											<text class="relative award-cell-txt">
												<text>{{ item.item_name }}</text>
												<text style="color: #63FFF7;">*{{ item.num }}</text>
											</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<view class="award-oper-btn absolute" @click="setGameFun">
							<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/btn-gif.png`" mode=""></image>
							<view class="oper-btn-box absolute font-hanserif-bold">抽奖</view>
							<view class="oper-btn-txt absolute">活跃值消耗{{ activeCostNums }}</view>
						</view>

						<image class="side-content absolute" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/side-ico-record.png`" mode="" @click="getRouletteRecordFun"></image>
					</view>
					
					<view class="roulette-nums relative flex-all-center">
						<image :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/surplus-num.png`"
							class="bg" />
						<text class="roulette-nums-txt relative font-hanserif-bold ">
							<text class="roulette-nums-title">剩余活跃值：</text>
							<text style="color: #63FFF7;">{{ activeTotalNums }}</text>
						</text>
					</view>

					<view class="roulette-award-btn margin-auto relative" @click="setAllDoneTaskFun">
						<image class="bg"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/all-receive.png`" mode="">
						</image>
					</view>

					<view class="roulette-gametask margin-auto relative">
						
						<view class="gametask-content margin-auto relative">
							<image class="bg"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/task-list-bg.png`" mode="">
							</image>
							
							<view class="gametask-title absolute-center flex-all-center margin-auto">
								<image class="bg"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/task-title-bg.png`" mode="">
								</image>
								<view class="relative">每日任务</view>
							</view>
							
							<view class="gametask-desc relative">
								<text>每日任务将在</text>
								<text style="color: #63FFF7;margin: 0 6rpx;">{{ countdownTimer }}</text> 
								<text>后重置(活跃值不重置)</text>
							</view>
							
							<view class="gametask-info margin-auto relative">
								<view class="info-item relative flex-align-items-center" v-for="(item, index) in taskInfoData" :key="index">
									<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/task-item.png`" mode=""></image>
									<view class="info-item-left relative flex-all-center">
										<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/task-box-bg.png`" mode=""></image>
											
										<image style="width: 96rpx;max-height: 96rpx;border-radius: 8rpx;" :src="item.task_cover" mode="widthFix"></image>
										
										<view class="item-left-value absolute flex-all-center">
											<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/task-box-num-bg.png`" mode=""></image>
											<view class="relative">x{{ item.active_value }}</view>
										</view>
									</view>
									
									<view class="info-item-center relative flex-justify-content-center flex-direction-column">
										<view style="font-size: 26rpx;" class="font-hanserif-bold">{{ item.remarks }}</view>
										
										<view class="item-process flex-align-items-center">
											<view class="process-box relative">
												<view class="process-nums absolute"
													:style="{width: numCalculation(item.get_num, item.all_num) * 100 + '%'}">
												</view>
											</view>
											<text>{{ item.get_num }}/{{ item.all_num }}</text>
										</view>
									</view>
									
									<button v-if="item.status === 0 && item.task_type === 7"
										class="info-item-right flex-all-center relative trans-button font-hanserif-bold" :style="{
											whiteSpace: 'nowrap',
											fontSize: '26rpx',
										}" open-type="share"
										@click="setShareFun"
										>
										<view class="info-item-right flex-all-center relative">
											<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/task-btn-${item.status || 3}.png`" mode=""></image>
											<text class="relative">{{ (item.status === 2 ? '已分享' : (item.title || '分享')) }}</text>
										</view>
									</button>
									
									<view @click="setTaskDoneFun(item, 'task')" v-else
										class="info-item-right flex-all-center relative">
										<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/task-btn-${item.status || 3}.png`" mode=""></image>
										<text class="relative">{{ item.status === 1 ? '领取' : (item.status === 2 ? '已完成' : (item.title || '去完成')) }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 奖品弹框 -->
			<view class="roulette-mask fixed" v-if="isShowMask" :zoom="true" @click="isShowMask = false">
				<view class="roulette-mask-view relative flex-all-center">
					<view class="mask-view-box absolute-center view-box-content">
						<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/received-bg.png`" mode=""></image>
						<view class="view-box-info absolute flex flex-justify-content-center">
							<view class="box-info-item flex-direction-column flex-align-items-center">
								<view class="box-info-cover relative flex-direction-column flex-all-center">
									<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/goods-bg.png`"mode=""></image>
									<image style="height: 84rpx;" :src="taskAwardData.item_cover" mode="heightFix"></image>
								</view>
								<view class="box-info-txt truncate font-hanserif-bold">
									<text>{{ taskAwardData.item_name }}</text>
									<text class="box-info-nums">x{{ taskAwardData.num }}</text>
								</view>
							</view>
						</view>
					</view>
					
					<image class="receive-btn-box absolute-center" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/received-btn-img.png`"mode=""></image>
				</view>
			</view>
			
			<!-- 记录弹框 -->
			<view class="roulette-mask fixed" v-if="isRecordShowMask" :zoom="true" @click="isRecordShowMask = false">
				<view class="roulette-record absolute">
					<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/record-bg.png`" mode=""></image>

					<view class="" style="width: 100%;height: 100%;" v-if="!resLists.length">
						<comEmptyData></comEmptyData>
					</view>

					<scroll-view scroll-y @scrolltolower="scrolltolower" class="roulette-record-info relative" v-else>
						<view class="roulette-record-item margin-auto relative flex-align-items-center flex-justify-content-between" v-for="(item, index) in resLists" :key="index">
							
							<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/record-item.png`" mode=""></image>
							<view class="record-item-left relative">
								<view class="record-item-name truncate font-hanserif-bold">{{ item.item_name }} x{{ item.num }}</view>
								<view class="record-item-time">{{ item.create_time }}</view>
							</view>
							<view class="record-item-right relative flex-all-center">
								<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/record-box.png`" mode=""></image>
								<image style="max-width: 80rpx;height: 80rpx;" :src="item.item_cover" mode="heightFix"></image>
							</view>
	
						</view>
					</scroll-view>
				
					<image class="mask-close-box relative margin-auto" :src="`${commonConfigs.domainFrontFileLink}/files/images/roulette/mask-close-tip.png`" mode=""></image>
				</view>
			</view>
		</template>
	</comRoot>

</template>

<script>
	import store from '@/store';

	import paging from '@/inmixed/paging.mixin.js'

	import {
		setCountFunDown,
		setAsyncFunWait
	} from '@/setupproject/TOOLS_FUN'

	import {
		getTurntableIndexApi, //轮盘
		getTurntableDoneApi, //抽奖
		getTurntableLogApi, // 轮盘-领取记录
		getTaskHomeApi, //每日任务列表
		getTaskDoneApi, // 领取任务奖励
		getTaskDoneAllApi, // 一键领取任务奖励
		getRecordShareLogApi, //记录分享
	} from '@/setupproject/INTERFACE'

	export default {
		name: 'rouletteGamePage',
		mixins: [paging],
		data() {
			return {
				taskAwardData: {},
				taskInfoData: [],
				rouletteId: '',
				isStartGame: false,
				gameAwardData: [],
				isShowMask: false,
				rotateDeg: 0,
				timer: null,
				countdownTimer: '-- : -- : --',
				isRecordShowMask: false,
				activeTotalNums: 0, //剩余活跃值
				activeCostNums: 0, //消耗活跃值
			}
		},
		computed: {
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
		},
		onShow() {
			// 获取轮盘游戏内容
			this.getRouletteInfoFun();
			this.getRouletteTaskFun();
			
			this.timer = setInterval(() => {
				this.countdownTimer = setCountFunDown();
				if (this.countdownTimer === "00 : 00 : 00") {
					this.getRouletteTaskFun();
				}
			}, 1000)
		},
		onUnload() {
			if(this.timer) {  
				clearInterval(this.timer);  
				this.timer = null;  
			}  
		},
		onShareAppMessage() {
			uni.showLoading({
				title: '',
				mask: false
			});
			
			const promise = new Promise(async resolve => {
				await setAsyncFunWait(500);

				const shareObjData = {
					title: '旺卡抽赏实现你心中梦想!',
					path: `/secondary/rouletteGamePage/rouletteGamePage`,
					imageUrl: `${this.commonConfigs.domainFrontFileLink}/files/images/common/new-mp-share.png`,
					content: '',
					desc: '',
				};

				await getRecordShareLogApi();
				await this.getRouletteTaskFun();

				uni.hideLoading();

				resolve(shareObjData);
			})

			return {
				promise
			}

		},
		methods: {
			async getRouletteInfoFun() {
				const {
					data,
					msg,
					code,
				} = await getTurntableIndexApi();
				
				if (code !== 200) return false;
				
				this.gameAwardData = data.rows || []; // 轮盘游戏数组
				this.activeTotalNums = data.active_value || 0; //剩余活跃值
				this.activeCostNums = data.active_value_cost || 0; //消耗活跃值
				this.rouletteId = data.turntable_id || ''; // 轮盘游戏id
			},
			
			async setGameFun() {
				let initDegNum = 360 - this.rotateDeg % 360 + this.rotateDeg;
			
				if (this.activeTotalNums <= 0 || this.activeTotalNums < this.activeCostNums) {
					return uni.showToast({
						title: '活跃值不够,无法抽奖!',
						icon: 'none',
						duration: 1200,
					});
				}
			
				if (this.isStartGame) return;
				
				const {
					data,
					msg,
					code,
				} = await getTurntableDoneApi({
					turntable_id: this.rouletteId
				});
				
				if (code !== 200) return;
			
				let currentIndex = 0;
			
				this.activeTotalNums = data.active_value; //剩余活跃值
			
				this.gameAwardData.map((item, index) => {
					if (item.id == data.item_config_id) {
						currentIndex = index;
						this.taskAwardData = item;
					}
				});
			
				const awardLength = this.gameAwardData.length;
				const offsetNum = 360 - (360 / awardLength) * currentIndex;
				
				this.rotateDeg = 8 * 360 + offsetNum + initDegNum;
				this.isStartGame = true;
				
				setTimeout(() => {
					this.isStartGame = false;
					this.isShowMask = true;
				}, 4840);
			},
			
			async listsGetFun() {
				const {
					data,
					code,
				} = await getTurntableLogApi({
					page: this.pageInfoObj.page,
					pageSize: this.pageInfoObj.page_size,
				});
				if (code !== 200) return false;
				data.resLists = data.rows || [];
				data.count = data.total;
				return data;
			},
			
			numCalculation(nums, sums) {
				let res = 0;
				if (sums == 0) {
					res = 1;
				} else {
					res = nums / sums > 1 ? 1 : nums / sums;
				}
				return res;
			},
			
			async getRouletteRecordFun() {
				this.isRecordShowMask = true;
				await this.pagingInitFun();
				await this.resListsGetFun();
			},
			
			async setAllDoneTaskFun() {
				const {
					data,
					code,
					msg
				} = await getTaskDoneAllApi();

				if (code !== 200) {
					return uni.showToast({
						icon: "error",
						title: msg,
					})
				}

				uni.showToast({
					icon: "none",
					title: msg,
					mask: true,
					duration: 1000,
				})

				await setAsyncFunWait(600);

				await this.getRouletteTaskFun();
				await this.getRouletteInfoFun();
			},
			
			async getRouletteTaskFun() {
				const res = await getTaskHomeApi({
					type: 1,
				});
			
				this.taskInfoData = res.data.task || [];
			},
			
			async setShareFun() {
				// #ifdef APP-PLUS
				this.$store.commit('SHARE_INFO_SET_FUN', {
					ttitle: '旺卡抽赏实现你心中梦想!',
					path: `/secondary/rouletteGamePage/rouletteGamePage`,
					imageUrl: `${this.commonConfigs.domainFrontFileLink}/files/images/common/new-mp-share.png`,
					content: '',
					desc: ''
				});
				
				await getRecordShareLogApi();
				
				await this.getRouletteTaskFun();
				// #endif
			},
			
			async setTaskDoneFun(item, type) {
				if (type === 'task' && item.url && item.status === 0) {
					if (item.url.indexOf('/pages/tabbar/tabbar') !== -1) {
						return uni.reLaunch({
							url: item.url,
						})
					} else {
						return uni.navigateTo({
							url: item.url,
						})
					}
				}
			
				const {
					data,
					code,
					msg
				} = await getTaskDoneApi({
					task_id: item.id
				});
			
				if (code !== 200) {
					return uni.showToast({
						icon: "none",
						title: msg,
					})
				}
			
				this.taskAwardData = data;
			
				if (data.is_receive == 0) {
					uni.showToast({
						icon: "success",
						title: msg,
						mask: true,
						duration: 1000,
					})
				}
			
				if (type === 'box') {
					this.isShowMask = true;
				}
			
				await setAsyncFunWait(600);
				await this.getRouletteTaskFun();
				await this.getRouletteInfoFun();
			},
		},
	}
</script>

<style scoped lang="scss">
	.roulette-page {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.roulette-name {
			width: 550rpx;
			height: 192rpx;
			margin-top: 28rpx;
		}

		.roulette-content {
			width: 676rpx;
			height: 676rpx;
			margin-top: 20rpx;
			
			.award-light-box {
				width: 292rpx;
				height: 336rpx;
				top: 16rpx;
				left: 0;
				right: 0;
				margin: auto;
				transform: translateX(4rpx);
			}

			.game-box {
				left: 8rpx;
				right: 0;
				top: 28rpx;
				z-index: 100;
				margin: auto;
				width: 624rpx;
				height: 624rpx;

				.game-box-content {
					right: 0;
					top: 0;
					left: 0;
					margin: auto;
					width: 100%;
					height: 100%;
					
					&.rotate-deg-num {
						transform: rotate(3800deg);
						transition: transform 5s ease;
					}

					.award-content {
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;

						.award-cell {
							width: 120rpx;
							height: 120rpx;

							.award-cell-title {
								font-size: 16rpx;
								color: #FFF;
								left: 0;
								right: 0;
								top: 100rpx;
								margin: auto;
								width: 110rpx;
								height: 40rpx;
								
								.award-cell-txt {
									width: 100%;
									text-align: center;
									white-space: nowrap;
									line-height: 40rpx;
									// margin-top: -4rpx;
									
								}
							}

							.award-cell-cover {
								max-width: 82rpx;
								height: 92rpx;
								border-radius: 10rpx;
								left: 0;
								right: 0;
								top: 0;
								bottom: 0;
								margin: auto;
							}

							&:nth-child(1) {
								top: 48rpx;
								margin: auto;
								left: 0;
								right: 0;
							}

							&:nth-child(2) {
								top: 120rpx;
								right: 90rpx;
							}

							&:nth-child(3) {
								top: 276rpx;
								right: 50rpx;
							}

							&:nth-child(4) {
								top: 404rpx;
								right: 154rpx;
							}

							&:nth-child(5) {
								top: 404rpx;
								left: 154rpx;
							}

							&:nth-child(6) {
								top: 276rpx;
								left: 50rpx;
							}

							&:nth-child(7) {
								top: 120rpx;
								left: 90rpx;
							}
						}
					}
				}
			}

			.award-oper-btn {
				top: 170rpx;
				left: 20rpx;
				right: 0;
				margin: auto;
				width: 234rpx;
				height: 276rpx;
				z-index: 110;
				
				.oper-btn-box {
					width: 100%;
					text-align: center;
					font-size: 42rpx;
					color: #FFF9ED;
					top: 130rpx;
					left: -10rpx;
					right: 0;
					margin: auto;
					// text-shadow: #3145C8 2rpx 0 0, #3145C8 0 2rpx 0, #3145C8 -2rpx 0 0, #3145C8 0 -2rpx 0;
				}
				.oper-btn-txt {
					width: 100%;
					text-align: center;
					font-size: 22rpx;
					color: #FFFFFF;
					top: 184rpx;
					left: -10rpx;
					right: 0;
					margin: auto;
					// text-shadow: #8D613C 2rpx 0 0, #8D613C 0 2rpx 0, #8D613C -2rpx 0 0, #8D613C 0 -2rpx 0;
				}
			}

			.side-content {
				width: 60rpx;
				height: 148rpx;
				z-index: 110;
				right: -40rpx;
				bottom: 100rpx;
			}
		}
		
		.roulette-nums {
			width: 466rpx;
			height: 64rpx;
			font-weight: bold;
			font-size: 28rpx;
			z-index: 110;
			left: 0;
			right: 0;
			margin: auto;
		
			.roulette-nums-txt {
				color: #FFFFFF;
				font-size: 32rpx;
				font-style: italic;
				
				.roulette-nums-title {
					background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}

		.roulette-award-btn {
			margin-top: 30rpx;
			width: 248rpx;
			height: 76rpx;
		}

		.roulette-gametask {
			margin-top: 48rpx;

			.gametask-content {
				width: 710rpx;
				height: 867rpx;
				margin-top: 30rpx;
				padding-top: 40rpx;
				
				.gametask-title {
					width: 421rpx;
					height: 85rpx;
					font-size: 40rpx;
					color: #FFFFFF;
					top: -30rpx;
				}

				.gametask-desc {
					text-align: center;
					font-size: 24rpx;
					color: #fff;
					margin-top: 30rpx;
					height: 36rpx;
					line-height: 36rpx;
				}

				.gametask-info {
					margin-top: 20rpx;
					width: 632rpx;
					height: 680rpx;
					overflow-y: auto;

					.info-item {
						width: 632rpx;
						height: 120rpx;
						padding: 0 14rpx;
						margin-bottom: 18rpx;

						.info-item-left {
							width: 96rpx;
							height: 96rpx;

							.item-left-value {
								font-size: 18rpx;
								color: #FFF;
								padding: 0 8rpx;
								bottom: 0rpx;
								right: -2rpx;
								width: 48rpx;
								height: 24rpx;
								text-align: center;
							}

						}

						.info-item-center {
							color: #fff;
							width: 320rpx;
							height: 90rpx;
							font-size: 20rpx;
							margin-left: 14rpx;

							.item-process {
								.process-box {
									width: 220rpx;
									height: 16rpx;
									background: #D9D9D9;
									border-radius: 10rpx;
									margin-right: 10rpx;

									.process-nums {
										max-width: 100%;
										height: 16rpx;
										border-radius: 10rpx;
										background: #63FFF7;
										left: 0;
										top: 0;
									}
								}
							}
						}

						.info-item-right {
							font-size: 30rpx;
							color: #fff;
							width: 160rpx;
							height: 50rpx;
						}
					}
				}
			}
		}
		
	}

	.roulette-mask {
		top: 0;
		left: 0;
		z-index: 998;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.82);

		.roulette-mask-view {
			height: 100%;
			z-index: 10;

			.view-box-content {
				color: #FFFFFF;
				flex-direction: column;
				// animation: openBoxSize 1s both 0.6s 1;
				// -webkit-animation: openBoxSize 1s both 0.6s 1;
				// visibility: hidden;

				// @keyframes openBoxSize {
				// 	0% {
				// 		transform: scale(0);
				// 		visibility: hidden;
				// 	}

				// 	100% {
				// 		transform: scale(1);
				// 		visibility: visible;
				// 	}
				// }
			}

		}


		.roulette-record {
			width: 670rpx;
			height: 1090rpx;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;

			.roulette-record-info {
				width: 606rpx;
				height: 860rpx;
				left: 0;
				right: 0;
				top: 150rpx;
				margin: auto;
				overflow-y: auto;

				.roulette-record-item {
					width: 606rpx;
					height: 124rpx;
					margin-bottom: 20rpx;
					padding: 0 24rpx;

					.record-item-left {
						margin-right: 24rpx;
						width: 380rpx;

						.record-item-name {
							color: #FFFFFF;
							font-size: 32rpx;
						}

						.record-item-time {
							color: #FFFFFF;
							font-size: 20rpx;
						}
					}

					.record-item-right {
						width: 116rpx;
						height: 116rpx;
					}
				}
			}
		}

	}

	.mask-view-box {
		color: #fff;
		width: 650rpx;
		height: 441rpx;
		
		.view-box-info {
			width: 590rpx;
			left: 0;
			right: 0;
			top: 150rpx;
			margin: auto;
			overflow-x: auto;
		
			.box-info-item+.box-info-item {
				margin-left: 20rpx;
			}
		
			.box-info-cover {
				width: 132rpx;
				height: 133rpx;
			}
		
			.box-info-txt {
				font-size: 30rpx;
				margin-top: 12rpx;
				
				.box-info-nums {
					margin-left: 6rpx;
					color: #63FFF7;
				}
			}
		}
		
	}
	
	.receive-btn-box {
		width: 168rpx;
		height: 68rpx;
		bottom: -600rpx;
	}
	
	.mask-close-box {
		width: 196rpx;
		height: 28rpx;
		top: 260rpx;
	}

</style>